import React, { Component } from "react";
//引入react-redux包
import { connect } from "react-redux";
//引入store
import { delete_cart_action } from "../../store/store";
//引入组件
import Header from "../Header/Header";
//引入antd-mobile
import { Toast } from "antd-mobile";

class Cart extends Component {
    constructor() {
        super();
        this.state = {
            time: ["立刻送出", "15:50", "16:10", "16:30", "16:50", "17:00"],
            date: "立刻送出",
            flag: false
        };
    }
    render() {
        console.log(this.props.cartList);
        let totalPrice = 0;
        this.props.cartList.forEach((item, index) => {
            totalPrice += item.price * item.count;
        });
        return (
            <div className="cart">
                <Header title="提交订单"></Header>
                <div
                    className="toAddress"
                    onClick={() => {
                        this.props.history.push("/address");
                    }}
                >
                    {this.props.location.state ? (
                        <>
                            <h3>{this.props.location.state.addr}</h3>
                            <p>
                                <span>{this.props.location.state.name}</span>
                                <span>{this.props.location.state.phone}</span>
                            </p>
                        </>
                    ) : (
                        <span>选择收货地址</span>
                    )}
                </div>
                <div
                    className="toAddress"
                    onClick={() => {
                        this.setState({
                            flag: true
                        });
                    }}
                >
                    配送时间：{this.state.date}
                </div>
                <div className="content">
                    {this.props.cartList.map((item, index) => {
                        return (
                            <div className="cart-item" key={item.id}>
                                <img src={item.img} alt="" />
                                <div>
                                    <p>{item.title}</p>
                                    <p>￥{item.price}元</p>
                                    <p>&times;{item.count}</p>
                                </div>
                                <span
                                    onClick={() => {
                                        this.props.delete(item.id);
                                    }}
                                >
                                    &times;
                                </span>
                            </div>
                        );
                    })}
                </div>
                <div className="totalPrice">
                    <span>合计：￥{totalPrice}元</span>
                    <b
                        onClick={() => {
                            this.props.location.state
                                ? Toast.success("订单提交成功")
                                : Toast.fail("请选择收货地址");
                        }}
                    >
                        提交订单
                    </b>
                </div>
                {this.state.flag && (
                    <div className="mask">
                        <div className="time">
                            {this.state.time.map((item, index) => {
                                return (
                                    <p key={index}>
                                        {item}
                                        <input
                                            type="radio"
                                            name="time"
                                            value={item}
                                            onChange={e => {
                                                this.setState({
                                                    date: e.target.value,
                                                    flag: false
                                                });
                                            }}
                                        />
                                    </p>
                                );
                            })}
                        </div>
                    </div>
                )}
            </div>
        );
    }
}
export default connect(
    state => {
        return {
            cartList: state.cartList
        };
    },
    dispatch => {
        return {
            delete(id) {
                dispatch(delete_cart_action(id));
            }
        };
    }
)(Cart);
